<layout name="layout" />
<ul class="uk-breadcrumb">
    <li><a href="__APP__">Home</a></li>
    <li><a href="__MODULE__/Product/shopcart">Shopping Cart</a></li>
    <li class="uk-active"><span>Checkout</span></li>
</ul>
<form id="confirm_order" method="post" action="__CONTROLLER__/confirm">
    <div class="uk-alert">1.&nbsp;Order summarry</div>
    <table class="uk-table uk-form">
        <thead>
            <tr>
                <th>Product</th>
                <th>Price</th>
                <th>Quantity</th>
                <th>Total</th>
            </tr>
        </thead>
        <tbody>
            <volist name="shopcart['cart_arr']['items']" id="vo">
                <tr>
                    <td>
                        <a class="uk-thumbnail" href="__CONTROLLER__/details/pid/{$vo['data']['pid']}">
                            <img src="__PUBLIC__/Uploads/{$vo['data']['dir']}/thumb_{$vo['data']['img']}" alt="{$vo['data']['product_name']}">
                            <div class="uk-thumbnail-caption">{$vo['data']['product_name']}</div>
                        </a>
                    </td>
                    <td>{$vo['data']['price']|number_format="2"}</td>
                    <td>
                        <i class="uk-icon-times"></i>&nbsp;{$vo['data']['quantity']}
                    </td>
                    <td>{$vo['data']['price']*$vo['data']['quantity']|number_format="2"}</td>
                </tr>
            </volist>
        </tbody>
    </table>
    <div class="uk-alert">2.&nbsp;Billing Address&nbsp;
        <button type="button" ng-click="showModal(1)" class="uk-icon-plus-circle uk-button uk-button-danger">&nbsp;Add New</button>
    </div>
    <empty name="billing">
        <div class="uk-alert uk-alert-warning">
            No billing address found
        </div>
        <else/>
        <table class="uk-table uk-form">
            <thead>
                <tr>
                    <th width=50>--</th>
                    <th>Address Details</th>
                    <th>Country</th>
                    <th>Zip</th>
                    <th>Phone</th>
                    <th>Name</th>
                </tr>
            </thead>
            <tbody>
                <volist name="billing" id="vo">
                    <tr>
                        <td width=100>
                            <input type="radio" <eq name="key" value="0">ng-checked="true"</eq> name="bill_id" ng-model="post_data.bill_id" value="{$vo.addr_id}" />
                        </td>
                        <td>{$vo.addr_street},{$vo.addr_city},{$vo.addr_country}</td>
                        <td width=100>{$vo.addr_country}</td>
                        <td width=100>{$vo.addr_zip}</td>
                        <td width=100>{$vo.addr_phone}</td>
                        <td width=100>{$vo.addr_firstname}{$vo.addr_lastname}</td>
                    </tr>
                </volist>
            </tbody>
        </table>
    </empty>
    <div class="uk-alert">3.&nbsp;Shipping Address&nbsp;
        <button type="button" ng-click="showModal(0)" class="uk-icon-plus-circle uk-button uk-button-danger">&nbsp;Add New</button>
    </div>
    <empty name="shipping">
        <div class="uk-alert uk-alert-warning">
            No shipping address found
        </div>
        <else/>
        <table class="uk-table uk-form">
            <thead>
                <tr>
                    <th width=50>--</th>
                    <th>Address Details</th>
                    <th>Country</th>
                    <th>Zip</th>
                    <th>Phone</th>
                    <th>Name</th>
                </tr>
            </thead>
            <tbody>
                <volist name="shipping" id="vo">
                    <tr>
                        <td width=100>
                            <input type="radio" <eq name="key" value="0">ng-checked="true"</eq> ng-model="post_data.ship_id" name="ship_id" value="{$vo.addr_id}" />
                        </td>
                        <td>{$vo.addr_street},{$vo.addr_city},{$vo.addr_country}</td>
                        <td width=100>{$vo.addr_country}</td>
                        <td width=100>{$vo.addr_zip}</td>
                        <td width=100>{$vo.addr_phone}</td>
                        <td width=100>{$vo.addr_firstname}{$vo.addr_lastname}</td>
                    </tr>
                </volist>
            </tbody>
        </table>
    </empty>
    <div class="uk-alert">4.&nbsp;Payment Method</div>
    <ul class="uk-list uk-list-line">
        <volist name="payment_list" id="vo">
            <li>
                <label>
                    <input type="radio" <eq name="key" value="0">ng-checked="true"</eq> name="payment_name" ng-model="post_data.payment_name" value="{$vo.pm_name}" />&nbsp;&nbsp;
                    <img src="__PUBLIC__/Payment/{$vo['other']['logo']}" title="{$vo['other']['title']}" alt="{$vo['other']['title']}" /> &nbsp;&nbsp; {$vo['other']['title']} {$vo['other']['front_desc']}
                </label>
                <div class="uk-clearfix uk-margin">
                    {:Pay("Common/".$vo['pm_name']."/front")}
                </div>
            </li>
        </volist>
    </ul>
    <hr>
    <div class="uk-float-left">
        <a class="uk-button" href="__MODULE__/Product/shopcart">
            << &nbsp;Back to shoppingcart</a>
    </div>
    <div class="uk-float-right">
        <ul class="uk-list">
            <li><b>Total items&nbsp;:&nbsp;{$shopcart['cart_items']}</b></li>
            <li><b>Total Amount&nbsp;:&nbsp;${$shopcart['cart_amount']|number_format="2"}</b></li>
        </ul>
        <button type="button" ng-click="confirm_order()" class="uk-button uk-button-primary">>>&nbsp;Check Out</button>
    </div>
</form>
<div id="address" class="uk-modal">
    <form class="uk-form uk-form-horizontal" method="post" action="__MODULE__/Customer/addAddress">
        <input type="hidden" name="addr_type" value="{{address_type}}" />
        <div class="uk-modal-dialog">
            <a class="uk-modal-close uk-close"></a>
            <div class="uk-modal-header">{{address_title}}</div>
            <div class="uk-form-row">
                <label class="uk-form-label"> First Name</label>
                <div class="uk-form-controls">
                    <input type="text" required name="addr_firstname" placeholder="">
                </div>
            </div>
            <div class="uk-form-row">
                <label class="uk-form-label"> Last Name</label>
                <div class="uk-form-controls">
                    <input type="text" required name="addr_lastname" placeholder="">
                </div>
            </div>
            <div class="uk-form-row">
                <label class="uk-form-label">Country</label>
                <div class="uk-form-controls">
                    <select required ng-model="addr_country" name="addr_country" ng-change="chooseCountry()">
                        <option value="">--Please choose--</option>
                        <volist name=":getCountryList()" id="vo">
                            <option value="{$vo.countries_iso_code_2}">{$vo.countries_name}</option>
                        </volist>
                    </select>
                </div>
            </div>
            <div class="uk-form-row">
                <label class="uk-form-label"> State</label>
                <div class="uk-form-controls">
                    <select name="addr_state" required>
                        <option ng-repeat="state in state_list" value="{{state.zone_code}}">{{state.zone_name}}</option>
                    </select>
                </div>
            </div>
            <div class="uk-form-row">
                <label class="uk-form-label"> City</label>
                <div class="uk-form-controls">
                    <input type="text" required name="addr_city" placeholder="">
                </div>
            </div>
            <div class="uk-form-row">
                <label class="uk-form-label"> Street</label>
                <div class="uk-form-controls">
                    <input type="text" required name="addr_street" placeholder="">
                </div>
            </div>
            <div class="uk-form-row">
                <label class="uk-form-label"> Zip</label>
                <div class="uk-form-controls">
                    <input type="text" required name="addr_zip" placeholder="">
                </div>
            </div>
            <div class="uk-form-row">
                <label class="uk-form-label"> Phone</label>
                <div class="uk-form-controls">
                    <input type="text" required name="addr_phone" placeholder="">
                </div>
            </div>
            <div class="uk-form-row">
                <label class="uk-form-label"> Birthday</label>
                <div class="uk-form-controls">
                    <input type="text" required name="addr_birthday" placeholder="">
                </div>
            </div>
            <div class="uk-form-row">
                <label class="uk-form-label"> Gender</label>
                <div class="uk-form-controls uk-form-controls-text">
                    <label>
                        <input type="radio" name="addr_gender" value="1" checked />&nbsp;Male</label>
                    <label>
                        <input type="radio" name="addr_gender" value="0" />&nbsp;Female</label>
                </div>
            </div>
            <div class="uk-modal-footer">
                <button type="submit" class="uk-button uk-button-danger">Confirm</button>
            </div>
        </div>
    </form>
</div>
